<template>
	<view class="pageCont">
		<view class="cn_se">
			<view class="cn_se_tit">请选择您的考试分类</view>
			<view class="cn_se_inp">
				 <input class="cn_se_text" v-model="inputValue" :placeholder="name" disabled  />
				 <view>（注：只可选择一门考试）</view>
			</view>
		</view>
		<block v-for="(item, index) in classList"  :key="index">
			 <view class="addClass">请选择{{titClass[index]}}</view>
			 <view class="clssLis">
				 <view :class="(item_.id == fatherId ) || (item_.id == childId  && indx == 1 ) ? 'getClasssSe getClass' : 'getClass' " v-for="(item_, index_) in item.list" :key="index_" @click="getClass(item_.id,index)">{{item_.name}}</view>
			 </view>
		</block>
		<view class="btn-confirm">
			<tui-button type="primary" shape="circle" @click="submitCorrection"   :size="24" margin="0 auto">确定</tui-button>
		</view>
	</view>
</template>

<script>
 
	var interstitialAd = null;
	export default{
		data(){
			return{
				classList: [],
				inputValue:"",
				requestStatus: false, // 事件防抖
				name:"",
				id:"",
				fatherId:"",
				childId:"",
				titClass:['学段','学科'],
				indx:""
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.name = option.name;
			this.getList()
		},
		methods: {
			getClass(id,i){
				if(i == 0 ) {
					this.fatherId = id
					this.childId = ''
				}else{
					this.childId = id
				}
				this.indx = i
				this.classList.splice(i+1)
				// console.log('防抖前--->',this.requestStatus)
				if (this.requestStatus) {
					return false;
				};
				this.requestStatus = true;
				this.selTopClass()
			},
			getList() {
				this.http('common/getCatelist', {parent_id:this.id}, 'post').then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							return
						} else {
							let newList = {list:[]}
							if(res.data.length){
								newList.list = res.data
								this.classList.push(newList)
							}else{
								uni.showToast({
									title: '没有更多学段了',
									icon: 'none',
								})
								setTimeout(function(){
									this.utils.goback()
								},1500)
							}
							
						}
					})
				},	
			selTopClass() {
				if(this.fatherId && this.indx == 0){
					this.http('common/getCatelist', {parent_id:this.fatherId}, 'post').then(res => {
							if (res.code == 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								return
							} else {
								setTimeout(() => {this.requestStatus = false;}, 500)
								let newList = {list:[]};
								res.data.length>0?(
								newList.list = res.data,this.classList.push(newList)):(uni.showToast({title: '没有更多学科下级了',icon: 'none'}))
								// console.log('防抖后1--->',this.requestStatus)
							}
						})
				}else if(this.childId && this.indx == 1){
					this.http('common/getCatelist', {parent_id:this.childId}, 'post').then(res => {
							if (res.code == 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								return
							} else {
								setTimeout(() => {this.requestStatus = false;}, 500)
								let newList = {list:[]};
								res.data.length>0?(
								newList.list = res.data,this.classList.push(newList)):([])
								uni.setStorageSync('selClasId', this.childId)
								// console.log('防抖后2--->',this.requestStatus)
							}
						})
				}else{
					uni.showToast({title: '请先选择学科学段',icon: 'none'})
				}
			},
			submitCorrection(){
				if(this.childId){
					this.utils.gotore('index')
				}else{
					uni.showToast({title: '请选择具体学科',icon: 'none'})
				}
			}
		}
	}
</script>

<style scoped>
	page {background-color: #ebeef3;}
	.pageCont{padding-bottom: 180rpx;}
	.cn_se{background-image:linear-gradient(to bottom, #5677fc, #7991f3); text-align: center;margin-bottom: 150rpx;}
	.cn_se_tit{font-size: 50rpx;color: #FFF;font-weight: 800;}
	.cn_se_inp{position: relative;background: #FFF;padding:40rpx 20rpx;top: 80rpx;width: 90%;
	margin: 0 auto;border-radius: 12rpx;box-shadow: 0rpx 6rpx 16rpx #d2d7ef;}
	.cn_se_inp view{color: #ababab;margin-top: 0px;border-top: 1rpx solid #DDD;padding-top: 10px;}
	.cn_se_text{ height: 100rpx;color: black;padding: 15rpx;font-size: 30rpx;font-weight: 800;}
	.cn_se_inp input{font-size: 40rpx;font-weight: 800;color: #000000;}
	.cn_se_inp input::placeholder{font-size: 40rpx;font-weight: 800;color: #000000;}
	.addClass{color: #333;font-weight: 800;font-size: 40rpx;margin: 30rpx auto 30rpx;text-align: center;}
	.clssLis{width:90%;margin: 0 auto;}
	.getClass{width: 44%;border-radius: 60rpx;padding: 20rpx 10rpx;background: #FFF;text-align: center;margin:20rpx 2%;display: inline-block;}
	.getClasssSe{color: #FFF;background-color:#5f7efa;box-shadow:  0rpx 6rpx 16rpx #d2d7ef;}
	.btn-confirm{position: fixed;bottom:6%;width:80%;left:10%}
</style>